<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-09-20 11:44:29
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-09-21 17:48:16
 * @FilePath: \vue-element-admin\src\views\hotUpdate\hotUpdate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="view-title">商品管理</div>

    <el-form :inline="true" :model="searchObj">
      <el-form-item label="名称">
        <el-input v-model="searchObj.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="searchObj.type" placeholder="请选择分类">
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSearch">搜索</el-button>
        <el-button
          type="primary"
          @click="handlerAdd"
          v-permission="['packageDetail:add']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>

    <!-- table -->
    <div>
      <el-table
        :data="tableDataPackage"
        v-loading="loading"
        element-loading-text="正在加载中"
        :header-cell-style="{
          borderColor: '#F0F0F0',
          height: '51px',
          background: '#F0F0F0',
          color: '#333',
        }"
        :row-style="{ height: '51px' }"
        :cell-style="{ borderColor: '#F0F0F0' }"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="se_title" label="副标题" align="center">
        </el-table-column>
        <el-table-column prop="money" label="金额" align="center">
        </el-table-column>
        <el-table-column prop="integral" label="积分" align="center">
        </el-table-column>
        <el-table-column prop="type" label="分类" align="center">
        </el-table-column>
        <el-table-column prop="inventory" label="库存" align="center">
        </el-table-column>
        <el-table-column prop="sold_num" label="已售数量" align="center">
        </el-table-column>
        <el-table-column label="是否上架" align="center">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.is_upload"
              :active-value="1"
              :inactive-value="0"
              @change="upEnabled($event, row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="weights" label="权重" align="center">
        </el-table-column>
        <!-- <el-table-column prop="main_img" label="封面图" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.main_img" alt="" class="table_img">
            </template>
          </el-table-column> -->
        <el-table-column prop="main_img" label="主图" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.main_img" style="width: 70px" alt="" />
          </template>
        </el-table-column>
        <!-- <el-table-column prop="detail" label="详情图"> </el-table-column> -->
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row)"
              type="text"
              size="small"
              v-permission="['packageDetail:edit']"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisibleAdd"
      :close-on-click-modal="false"
      width="50%"
      @close="handleCloseDialog"
    >
      <div>
        <el-form ref="formPakcage" :model="packageForm" label-width="80px">
          <el-form-item label="名称">
            <el-input
              v-model="packageForm.name"
              class="package_input"
            ></el-input>
          </el-form-item>

          <el-form-item label="标题">
            <el-input
              v-model="packageForm.title"
              class="package_input"
            ></el-input>
          </el-form-item>

          <el-form-item label="副标题">
            <el-input
              v-model="packageForm.se_title"
              class="package_input"
            ></el-input>
          </el-form-item>

          <el-form-item label="金额">
            <el-input
              v-model="packageForm.money"
              class="package_input"
            ></el-input>
          </el-form-item>

          <el-form-item label="积分">
            <el-input
              v-model="packageForm.integral"
              class="package_input"
            ></el-input>
          </el-form-item>

          <el-form-item label="分类">
            <!-- <el-input v-model="packageForm.type"></el-input> -->
            <el-select v-model="packageForm.type" placeholder="请选择">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="库存" class="package_input">
            <el-input v-model="packageForm.inventory"></el-input>
          </el-form-item>

          <el-form-item label="已售数量" class="package_input">
            <el-input v-model="packageForm.sold_num"></el-input>
          </el-form-item>

          <el-form-item label="是否上架">
            <!-- <el-input v-model="packageForm.sold_num"></el-input> -->
            <el-switch
              v-model="packageForm.is_upload"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>

          <el-form-item label="权重" class="package_input">
            <el-input v-model="packageForm.weights"></el-input>
          </el-form-item>

          <el-form-item label="封面图">
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadMainImgUrl"
              :on-success="onSuccessCoverFile"
              :on-error="onErrorCoverFile"
              :data="{ type: '10' }"
              list-type="text"
            >
              <el-button size="small" type="primary">上传封面图</el-button>
            </el-upload>
            <span v-if="packageForm.cover_img">
              <img
                :src="packageForm.cover_img"
                alt=""
                class="main_img_box"
                @click="handlerMainImg(file)"
                style="width: 200px; height: 200px"
              />
            </span>
          </el-form-item>

          <el-form-item label="主图">
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadMainImgUrl"
              :on-success="onSuccessFile"
              :on-error="onErrorFile"
              :data="{ type: '0' }"
              list-type="text"
            >
              <el-button size="small" type="primary">上传主图</el-button>
            </el-upload>
            <span v-if="packageForm.main_img">
              <img
                :src="packageForm.main_img"
                alt=""
                class="main_img_box"
                @click="handlerMainImg(file)"
                style="width: 200px; height: 200px"
              />
            </span>
          </el-form-item>

          <el-form-item label="详情图">
            <!-- <el-input
            v-model="packageForm.detail"
            class="package_input"
          ></el-input> -->
            <tinymce
              ref="myEditor"
              @input="input"
              :value="packageForm.detail"
            ></tinymce>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppPackageTypeList,
  addAppPackage,
  getAppPackageList,
  updateAppPackage,
} from "@/api/packageDetail";
import tinymce from "@/components/Tinymce/index.vue";

export default {
  components: {
    tinymce,
  },
  data() {
    return {
      nameValue: "",
      typeValue: "",
      typeOptions: [],
      searchObj: {
        name: "",
        type: "",
      },
      tableDataPackage: [],
      pageNow: 1,
      pageSize: 10,
      total: null,
      dialogVisibleAdd: false,

      packageForm: {
        id: "",
        name: "",
        title: "",
        se_title: "",
        money: "",
        integral: "",
        type: "",
        inventory: "",
        sold_num: "",
        is_upload: 0,
        main_img: "",
        detail: "",
        weights: "",
        cover_img: "",
      },
      content: "",
      typeOptions: [],
      uploadMainImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles", // 主图url
      loading: true,
      dialogTitle: "",
    };
  },
  mounted() {
    this.getAppPackageList();
  },
  methods: {
    // 获取套餐列表
    getAppPackageList() {
      getAppPackageList({
        name: this.searchObj.name,
        type: this.searchObj.type,
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.tableDataPackage = res.data;
          this.total = res.page_info.total_count;

          this.getAppPackageTypeList();
        } else {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取分类列表
    getAppPackageTypeList() {
      getAppPackageTypeList().then((res) => {
        if (res.code == 1) {
          this.typeOptions = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 修改商品
    updateAppPackage() {
      updateAppPackage({
        id: this.packageForm.id,
        name: this.packageForm.name,
        main_img: this.packageForm.main_img,
        detail: this.packageForm.detail,
        title: this.packageForm.title,
        se_title: this.packageForm.se_title,
        money: this.packageForm.money,
        integral: this.packageForm.integral,
        type: this.packageForm.type,
        inventory: this.packageForm.inventory,
        sold_num: this.packageForm.sold_num,
        is_upload: this.packageForm.is_upload,
        weights: this.packageForm.weights,
        cover_img: this.packageForm.cover_img,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisibleAdd = false;
          this.packageForm = {};
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    input(val) {
      this.packageForm.detail = val;
    },

    // 提交接口
    addAppPackage() {
      const that = this;
      addAppPackage({
        name: this.packageForm.name,
        main_img: this.packageForm.main_img,
        detail: this.packageForm.detail,
        title: this.packageForm.title,
        se_title: this.packageForm.se_title,
        money: this.packageForm.money,
        integral: this.packageForm.integral,
        type: this.packageForm.type,
        inventory: this.packageForm.inventory,
        sold_num: this.packageForm.sold_num,
        is_upload: this.packageForm.is_upload,
        weights: this.packageForm.weights,
        cover_img: this.packageForm.cover_img,
      }).then((res) => {
        if (res.code == 1) {
          that.$message.success(res.msg);
          that.dialogVisibleAdd = false;
          that.packageForm = {};
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 提交
    onSubmit() {
      let details = "";
      if (this.packageForm.id) {
        this.updateAppPackage();
      } else {
        this.addAppPackage();
      }
    },

    // 上传主图
    onSuccessFile(val) {
      this.packageForm.main_img = val.data.path;
    },
    onErrorFile(val) {
      this.apkValue = val.data.path;
    },

    // 上传封面图
    onSuccessCoverFile(val) {
      this.packageForm.cover_img = val.data.path;
    },
    onErrorCoverFile(val) {
      this.apkValue = val.data.path;
    },

    // 新增按钮
    handlerAdd() {
      this.dialogTitle = "新增";
      this.dialogVisibleAdd = true;
      localStorage.setItem("uploadType", "3");
    },

    // 搜索按钮
    handlerSearch() {
      this.getAppPackageList();
    },

    // 编辑
    handleEdit(val) {
      this.dialogTitle = "编辑";
      this.packageForm = val;
      this.$nextTick(() => {
        this.$refs.myEditor.setContent(val.detail);
      });

      this.dialogVisibleAdd = true;
    },
    upEnabled(e, val) {
      this.$confirm("是否更改上下架状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateAppPackage({
            id: val.id,
            is_upload: e,
          })
            .then((res) => {
              if (res.code == 1) {
                this.$message.success("修改成功");
                this.getAppPackageList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.getAppPackageList();
            });
        })
        .catch(() => {
          this.getAppPackageList();
        });
    },

    // 新增弹窗-叉号
    handleCloseDialog() {
      this.dialogVisibleAdd = false;
      this.packageForm = {};
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNow = 1;
      this.getAppPackageList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.getAppPackageList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
